<template>
    <div class="app">
        <div class="video-container">
            <video muted="muted" src="http://chst.vip:8081/crm/media/bg-video.d2d602a9.mp4" loop="loop"
                autoplay="autoplay" class="video"></video>
        </div>
    </div>
    <div class="loginOline">
        <h1 class="title">{{ pageInfo.title }}</h1>

        <!-- 动态组件 -->
        <component :is="pageInfo.component"></component>


        <div class="toggle">
            <svg class="icon" aria-hidden="true">
                <use :xlink:href="icon"></use> 
            </svg>
            <span @click="handleToggle">{{ pageInfo.toggleDes }}</span>
        </div>
    </div>
</template>
<script setup>
import commonLogin from "./commonLogin.vue"
import smsLogin from "./smsLogin.vue"
import { ref, watchEffect,markRaw,computed} from "vue"

// markRaw可以将响应式的ref变成常规对象

 
// 声明一个页面数据
let pageInfo = ref({
    title: '千锋管理系统',//标题
    loginType: 'common', //登录类型 commonLogin/smsLogin
    toggleDes: "点击切换手机登录",//切换的描述信息
    component: markRaw(smsLogin) //要切换的组件
})

// 标记是否常规登入
let isCommonLogin = ref(true);

// 点击切换登入方式
let handleToggle = () => {
    isCommonLogin.value = !isCommonLogin.value
}

// vue3的动态组件,通过:is结合component来动态切换


// 通过结合高级侦听器和vue3的动态组件来实现组件切换
watchEffect(() => {
    // 常规登录
    if (isCommonLogin.value) {
        pageInfo.value = {
            title: '千锋管理系统',//标题
            loginType: 'common', //登录类型 commonLogin/smsLogin
            toggleDes: "点击切换手机登录",//切换的描述信息
            component: markRaw(commonLogin) //要切换的组件
        }
    } else {
        // 手机短信登录
        pageInfo.value = {
            title: '短信登录',//标题
            loginType: 'sms', //登录类型 commonLogin/smsLogin
            toggleDes: "使用用户密码登入",//切换的描述信息
            component: markRaw(smsLogin) //要切换的组件
        }
    }
})

// 根据登入模式的切换,派发图片的名称
let icon = computed(()=>{
   return  isCommonLogin.value ? '#icon-iphone' : '#icon-icon-test'
})
</script>
  
<style lang="scss" scoped>
.u-form-item {
    color: white !important;

    .el-input {
        width: 200px !important;
    }

    .el-button {
        width: 200px !important;

    }

    :deep(.el-form-item__label) {
        color: white
    }

    a {

        margin: 10px 0 0 55px;
    }


}

.c-form-item {
    .el-input {
        width: 100px !important;

    }

    :deep(.el-input__wrapper) {
        border-radius: 4px 0 0 4px;
    }

    :deep(.el-form-item__label) {
        color: white
    }

    .code {
        width: 100px;
        height: 32px;
        // border: 1px solid;
        background-color: white;
        border-radius: 0 4px 4px 0;


    }

}

.loginOline {
    width: 400px;
    height: 550px;
    background-color: rgba(0, 0, 0, .3);
    position: fixed;
    right: 10%;
    top: 25%;


    h1 {
        padding: 90px 0 20px 0;
        text-align: center;
        color: white;
    }

    .toggle {
        text-align: center;

        .icon {
            width: 40px;
            height: 60px;
            vertical-align: middle;
        }
    }

    span {
        color: #fff;
        cursor: pointer;
    }
}

.app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>


